<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>首页</title>
    <meta content="*" http-equiv="Access-Control-Allow-Origin">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
    <body>
    <!-- 你的 HTML 代码 -->
        <!-- 轮播 -->
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="/images/img/1.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
                <div><img src="/images/img/2.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
                <div><img src="/images/img/3.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
                <div><img src="/images/img/4.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
            </div>
        </div>
    <!-- 手风琴效果展示公告信息 -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>公告</legend>
    </fieldset>
        <div class="layui-collapse" lay-accordion=""></div>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['carousel','layer', 'jquery','element'], function(){
            var layer = layui.layer;
            var carousel = layui.carousel;
            var $ = layui.jquery;
            var element = layui.element;
                //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: '380'
                ,arrow: 'always' //始终显示箭头
                ,autoplay : true
                //,anim: 'updown' //切换动画方式
            });
            // 调用接口，将公告全部查出
            $.get("/api/announcement", function (res) {
                var html = '';
                $.each(res.data, function (i, obj) {
                    html += '<div class="layui-colla-item"><h2 class="layui-colla-title">'+obj.title+'<i class="layui-icon layui-colla-icon"> </i></h2> <div class="layui-colla-content obser_collapse"><p>'+obj.contents+'</p></div></div>';
                });
                $('.layui-collapse').html(html);
                element.render();
            });
            element.on('collapse(test1)', function (data){
                layer.msg('展开状态：'+data.show);
        });
        });
    </script>
    </body>
</html>